<template>
    <NavBar>
    </NavBar>
    <ContentField>
        <h2 style="text-align:center;margin-bottom: 10px;">我的题集</h2>
        <h2><router-link class="btn btn-sm btn-success" style="width: 15%;" :to="{name: 'addSet'}">添加题集</router-link></h2>
        <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">id</th>
                <th scope="col">题集id(setId)</th>
                <th scope="col">创建者(createdBy)</th>
                <th scope="col">创建时间(createDate)</th>
                <th></th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for="(item, index) in proSets" :key="item.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ item.setId }}</td>
                    <td>{{ item.createdBy }}</td>
                    <td>{{ formatDate(item.createDate,"yyyy-MM-dd ") }}</td>
                    <td>
                        <router-link class="btn btn-sm btn-primary" style="margin-right:5px;" :to="{name:'setProfile', params: {setId: item.setId}} ">题集详情</router-link>
                    </td>
              </tr>
            </tbody>
        </table>


        <span aria-label="Page navigation example">
            <ul class="pagination" style="float:left">
                <li class="page-item disabled">
                    <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                </li>
            </ul>

            <ul class="pagination" style="float:right">
                <li class='page-item'>
                    <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                    <a v-else class="page-link" @click="getPage( teacherId, prePage, pageSize )">上一页</a>
                </li>

                <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                    <a  class="page-link" @click="getPage(teacherId, item,pageSize)">{{ item }}</a>
                </li>
                <li class= 'page-item'>
                    <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                    <a  v-else class="page-link" @click="getPage(teacherId, nextPage,pageSize )">下一页</a>  
                </li>
            </ul>
    </span>
    </ContentField>
</template>

<script>

import NavBar from "@/components/teacher/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import {useStore} from 'vuex';
import formatDate from '@/utils/DateFormatter';
import {ref} from 'vue';
import $ from 'jquery';

export default{
    name: 'setManage',
    components: {
        NavBar,
        ContentField,
    },
    computed: {
        formatDate(){
            return formatDate;
        },
    },

    setup(){

        const store = useStore();
        let teacherId = store.state.user.id;
        let proSets = ref([]);

        let PageNum = 1 ;  //当前页数
        let PageSize = 6 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (TId, PageNum, PageSize)=> {

            // console.log('TId:');
            // console.log(TId);
            // console.log('PageNum:');
            // console.log(PageNum);
            // console.log('PageSize:');
            // console.log(PageSize);

            $.ajax({  //通过TId获取所有题集
                url: 'http://localhost:8090/sls/proSet/getPageInfoByTId/' +TId + '/' + PageNum +'/' + PageSize ,
                type: 'get',
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){

                    proSets.value = resp.list;  //获取所有题集信息

                    totalNum.value = resp.total;
                    totalPage.value = resp.pages;
                    pageNum.value = resp.pageNum;
                    pageSize.value = resp.pageSize;
                    isFirstPage.value = resp.isFirstPage;
                    isLastPage.value = resp.isLastPage;
                    nextPage.value = resp.nextPage;
                    prePage.value = resp.prePage;

                    updatePageInfo(pageNum, pageSize);

                },
                error(resp){
                    console.log(resp);
                }
            });
        }

        getPage(teacherId, PageNum, PageSize);


        return{
            updatePageInfo,
            getPage,
            proSets,
            teacherId,
            PageNum,
            PageSize,
            pageNum,
            pageSize,
            totalNum,
            totalPage,
            isFirstPage,
            isLastPage,
            nextPage,
            prePage,
        }
    }
}

</script>

<style scoped>

</style>